<template>
	<div class="panel line">
		<h2>用户设备变化统计(2020)</h2>
		<div class="chart">图表</div>
		<div class="panel-footer"></div>
	</div>
</template>

<script>
	export default {
		mounted(){
			this.btn1()
		},
		methods:{
			btn1(){
				var myChart1=this.$echarts.init(document.querySelector('.line .chart'));
				var option1 = {
					
					color:['#00f2f1','#ed3f35','#ffeb7b'],
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data: ['安卓', 'iOS', '电脑'],
						textStyle:{
							color:'#4c9bfd'
						},
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
						top:'30%',
				        containLabel: true
				    },
				    xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: ['1', '2', '3','4','5','6','7','8','9','10','11','12'],
							axisTick: {
								alignWithLabel: true
							},
							axisLabel:{
								color:'rgba(255,255,255,.6)',
								fontSize:'12'
							},
							axisLine:{
								show:false,
							}
						}
				    ],
				    yAxis: [
				    	{
				    		type: 'value',
				    		axisLabel:{
				    			color:'rgba(255,255,255,.6)',
				    			fontSize:'12'
				    		},
				    		axisLine:{
				    			lineStyle:{
				    				color:'rgba(255,255,255,.1)',
				    				width:'2'
				    			}
				    		},
				    		splitLine:{
				    			lineStyle:{
				    				color:'rgba(255,255,255,.1)'
				    			}
				    		}
				    	}
				    ],
				    series: [
				        {
				            name: '安卓',
				            type: 'line',
							smooth:true,
				            data: [520,130,140,199,135,132, 101, 134, 90,180, 230, 210]
				        },
				        {
				            name: 'iOS',
				            type: 'line',
							smooth:true,
				            data: [220, 300, 191,234,200,350,170,210,250,210, 470, 330]
				        },
				        {
				            name: '电脑',
				            type: 'line',
							smooth:true,
				            data: [110, 200, 500,454,600,460,500,420,480,520,410,682]
				        }
						
				    ]
				};


				myChart1.setOption(option1)
				window.addEventListener('resize',function(){
					myChart1.resize()
				})
			}
		},
	}
</script>

<style>
</style>
